<!--酒店列表-->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px; margin-bottom: 10px">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>酒店管理</el-breadcrumb-item>
      <el-breadcrumb-item>酒店列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div class="hotel-main">
      <!--   搜索   -->
      <div class="d-flex justify-content" style="padding: 10px;">
        <p class="mr-5" style="width: 70px;font-size: 14px; display: inline">酒店名:</p>
        <el-input
            style="width: 200px; margin-left: 10px;"
            placeholder="请输入酒店名"
            prefix-icon="el-icon-search"
            v-model="name">
        </el-input>
        <p class="mr-5" style="width: 70px;font-size: 14px; display: inline; margin-left: 10px">地址:</p>
        <el-input
            style="width: 200px; margin-left: 10px;"
            placeholder="请输入地址"
            prefix-icon="el-icon-search"
            v-model="address">
        </el-input>
        <el-button style="margin-left: 20px" @click="getHotelList()" type="primary">查询</el-button>
      </div>
      <!--添加酒店-->
      <div class="d-flex justify-content-end" style="padding: 10px;margin-right: 20px; float: right">
        <el-button type="primary" style="width: 100px;" @click="addHotel()">添加酒店</el-button>
      </div>

      <!--酒店列表-->
      <el-table
          :data="HotelList"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="sort"
            label="序号"
            width="80">
        </el-table-column>
        <el-table-column
            prop="name"
            label="酒店名称"
            width="240">
        </el-table-column>
        <el-table-column
            prop="address"
            label="酒店地址">
        </el-table-column>
        <el-table-column width="250" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="success"
                @click="handleDetail(scope.$index, scope.row)">查看
            </el-button>
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹出框 -->
      <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="570px">
        <div class="contont">
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">绑定部门:</p>
            <el-select style="width: 350px;" v-model="form.deptId" placeholder="请选择"
                       :disabled="hotelValue == 'check'">
              <el-option v-for="item in deptList" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">酒店名称:</p>
            <el-input
                style="width: 350px;"
                placeholder="请输入酒店名称"
                v-model="form.name"
                :disabled="hotelValue == 'check'"
                clearable>
            </el-input>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">酒店地址:</p>
            <el-input
                style="width: 350px;"
                placeholder="请输入酒店地址"
                v-model="form.address"
                :disabled="hotelValue == 'check'"
                clearable>
            </el-input>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">停车场:</p>
            <el-input
                style="width: 350px;"
                placeholder="是否有停车场"
                v-model="form.parkingLot"
                :disabled="hotelValue == 'check'"
                clearable>
            </el-input>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">徽章(多个用逗号隔开):</p>
            <el-input
                style="width: 350px;"
                placeholder="请输入徽章内容"
                v-model="form.badge"
                :disabled="hotelValue == 'check'"
                clearable>
            </el-input>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">酒店类型:</p>
            <el-switch
                :disabled="hotelValue == 'check'"
                v-model="form.allowIsolation"
                active-text="隔离酒店"
                inactive-text="普通酒店">
            </el-switch>
          </div>
          <div class="d-flex align-items-center mt-10">
            <p class="w-100 text-left">封面:</p>
            <div class="d-flex align-items-center mb-15">
              <el-image style="width: 100px; height: 100px"
                        :src="form.cover"
                        fit="fit">
              </el-image>
              <el-upload
                  ref="upload"
                  action="#"
                  class="avatar-uploader ml-10"
                  accept="image/png,image/gif,image/jpg,image/jpeg"
                  :show-file-list="false"
                  :on-change="onChangeFile"
                  :before-upload="beforeAvatarUpload"
                  :http-request="uploadImg">
                <el-button
                    type="success"
                    plain
                    round
                    size="mini">
                  选择图片
                </el-button>
              </el-upload>
            </div>
          </div>

        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm()" v-if="hotelValue != 'check'">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,

      name: '',
      address: '',
      title: '',
      page: '',
      departData: '',
      hotelName: '',
      hotelAddress: '',
      hotelValue: '',
      hotelId: '',
      deptId: '',
      parking: '',
      pageNum: 0,
      sureDialog: false,
      currentHotelId: '',

      deptList: [],
      HotelList: [],

      form: {
        hotelId: '',
        deptId: '',
        parkingLot: '',
        name: undefined,
        address: undefined,
        badge: '',
        allowIsolation: ''
      },
    }
  },
  methods: {
    confirm() {
      let value = this.hotelValue
      let data = {
        deptId: this.form.deptId,
        name: this.form.name,
        address: this.form.address,
        parkingLot: this.form.parkingLot,
        cover: this.form.cover,
        badge: this.form.badge,
        allowIsolation: this.form.allowIsolation
      }
      if (value == 'add') {
        this.hotelRequest(value, data)
      } else if (value == 'modify') {
        data.id = this.form.id
        data.deptId = this.deptId
        this.hotelRequest(value, data)
      }
    },
    // 修改酒店信息
    handleEdit(index, row) {
      console.log(index);
      console.log("row", row);
      this.form = row
      if (row.allowIsolation == 1) {
        this.form.allowIsolation = true
      } else {
        this.form.allowIsolation = false
      }
      this.dialogVisible = true
      this.title = '修改酒店信息'
      this.hotelValue = 'modify'
    },
    // 删除酒店
    handleDelete(index, row) {
      console.log(index, row);
      this.axios.post('http://localhost:9000/api/hotel/delete/' + row.id).then(res => {
        console.log(res);
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1000
        });
        setTimeout(() => {
          this.$router.go(0)
        }, 1000)
      })
          .catch(err => {
            console.log(err);
          })
    },
    // 查看酒店详情
    handleDetail(index, row) {
      console.log(index, row);
      this.hotelValue = 'check'
      this.dialogVisible = true
      this.title = '查看酒店信息'
      this.form = row
    },
    // 添加酒店
    addHotel() {
      this.form = {}
      this.dialogVisible = true
      this.title = '添加酒店'
      this.hotelValue = 'add'
      this.getDeptList()
    },
    // 获取部门列表
    getDeptList() {
      let vo = {}
      this.axios.post('http://localhost:9000/api/dept/list', vo).then(res => {
        // console.log(res);
        this.deptList = res.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取酒店列表
    getHotelList() {
      let url = "http://localhost:9000/api/hotel/list";
      this.axios.get(url).then(res => {
        // console.log(res);
        this.HotelList = res.data.data;
      })
    },

    //图片改变调用函数
    onChangeFile(file) {
      this.form.cover = URL.createObjectURL(file.raw);

    },
    //图片上传之前的回调函数
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    // 图片上传函数
    uploadImg(params) {
      console.log(params);
      const config = {
        headers: {'Content-Type': 'multipart/form-data'},
      }
      const file = params.file

      // formdata
      const fd = new FormData();//通过form数据格式来传
      fd.append("img", file); //传文件
      fd.append("key", "hotel_cover");

      this.axios.post("http://localhost:9000/upload/img", fd, config)
          .then(res => {
            console.log(res);
            this.form.cover =  res.data.data
            this.$message({
              message: '上传成功',
              type: 'success',
              duration: 1000
            });
          })
          .catch(err => {
            console.log(err);
          })
    },

    //请求方法
    hotelRequest(url, data) {
      console.log("url=" + url);
      if (data.allowIsolation) {
        data.allowIsolation = 1
      } else {
        data.allowIsolation = 0
      }
      console.log("data=", data)
      this.axios.post('http://localhost:9000/api/hotel/' + url, data).then(res => {
        console.log("请求方法：" + res.data.code);
        if (res.data.code == 200) {
          this.$message({
            message: '操作成功！',
            type: 'success',
            duration: 1000
          });
          this.$router.go(0);
        } else if (res.data.code == 1001) {
          this.$message({
            message: res.data.msg,
            type: 'warning',
            duration: 1000
          });
        }
      }).catch(err => {
        console.log(err);
      })
    },
  },

  mounted() {
    this.getHotelList();
    this.getDeptList();
  }
}
</script>

<style>
.hotel-main {
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: space-between;*/
  /*width: 100%;*/
  /*height: 100%;*/
  background: #FFFFFF;
  box-shadow: 0px 5px 30px 0px rgba(22, 115, 255, 0.1);
}
</style>